<template>
    <div class="account">
        <scroll ref="scroll" class="scroll-content">
            <div class="scroll-warpper">
                <div class="account-item manage">
                    <div class="title">账户管理</div>
                    <ul class="item-box">
                        <li class="item">
                            <div class="text">头像</div>
                            <div class="item-con">
                                <img class="top-left" :src="user.avatar" width="36" height="36">
                            </div>
                        </li>
                        <li class="item">
                            <div class="text">手机码</div>
                            <div class="item-con">
                                {{user.tel}}
                            </div>
                        </li>
                        <li class="item">
                            <div class="text">姓名</div>
                            <div class="item-con">
                                <template v-if="user.name">{{user.name}}</template>
                                <template v-else>未填写</template>
                            </div>
                            <router-link tag="div" :to="{name:'HsqAccountModify'}" class="item-right">
                                <div class="modify" v-if="user.name">修改</div>
                                <div class="notset" v-else>未设置</div>
                                <i class="icon iconfont icon-enter back"></i>
                            </router-link>
                        </li>
                        <li class="item">
                            <div class="text">支付宝</div>
                            <div class="item-con">
                                <template v-if="user.alipay">{{user.alipay}}</template>
                                <template v-else>未填写</template>
                            </div>
                            <router-link tag="div" :to="{name:'HsqAccountModify'}" class="item-right">
                                <div class="modify" v-if="user.alipay">修改</div>
                                <div class="notset" v-else>未设置</div>
                                <i class="icon iconfont icon-enter back"></i>
                            </router-link>
                        </li>
                        <li class="item">
                            <div class="text">地址</div>
                            <div class="item-con">
                                <template v-if="user.address">{{user.provice}}{{user.city}}{{user.area}}{{user.address}}</template>
                                <template v-else>未填写</template>
                            </div>
                            <router-link tag="div" :to="{name:'HsqAccountModify'}" class="item-right">
                                <div class="modify" v-if="user.address">修改</div>
                                <div class="notset" v-else>未设置</div>
                                <i class="icon iconfont icon-enter back"></i>
                            </router-link>
                        </li>
                    </ul>
                </div>
                <div class="account-item manage">
                    <div class="title">安全设置</div>
                    <ul class="item-box">
                        <li class="item">
                            <div class="text">登录密码</div>
                            <div class="item-con">
                                <template v-if="user.pwd">**********</template>
                                <template v-else>未填写</template>
                            </div>
                            <router-link tag="div" :to="{name:'HsqPwdModify'}" class="item-right">
                                <div class="modify" v-if="user.pwd">修改</div>
                                <div class="notset" v-else>未设置</div>
                                <i class="icon iconfont icon-enter back"></i>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </scroll>
        <!-- 子路由出口 -->
        <router-view></router-view>
    </div>
</template>

<script>
import Scroll from '../../base/scroll/scroll.vue'
import {mapMutations, mapGetters} from 'vuex'
export default {
    data() {
        return {}
    },
    computed: {
        // 获取vuex用户对象的电话
        ...mapGetters([
            'user'
        ])
    },
    components: {Scroll, }
}
</script>
<style  lang="less" scoped>

@import "../../common/less/variable.less"; 
.scroll-content{
    z-index:91;
    .scroll-warpper{
        .account-item{
            .title{
                padding:0 10px;
                font-size:12px;
                line-height:35px;
                color:@color-alert-gray;
            }
            .item-box{
                background:#fff;
                padding:0 10px;
                .item{
                    display:flex;
                    height:50px;
                    line-height:50px;
                    border-bottom:1px solid @color-alert-line;
                    &:last-child{border:none}
                    font-size:14px;
                    color:@color-alert-title;
                    .text{
                        flex:0 0 70px;
                    }
                    .item-con{
                        flex:1;
                        color:@color-alert-con;
                        white-space: nowrap;
                        text-overflow:ellipsis; 
                        overflow:hidden;
                        img{
                            border-radius:50%;
                            margin-top: 7px;
                            border:1px solid @color-alert-line;
                            box-sizing:boeder-box;
                        }
                    }
                    .item-right{
                        color:@color-alert-con;
                        flex:0 0 60px;
                        text-align:right;
                        display:flex;
                        .modify{
                            flex:1
                        }
                        .notset{
                            flex:1;
                            color:@color-red;
                        }
                    }
                }
            }
        }
    }
}
</style>
